
<!-- 巡检任务列表 -->
<template>
    <div class="page">
        <div class="nuclein-query">
            <div>巡检任务列表</div>
            <div style="margin-left: auto;">
                <!-- <el-button size="mini" type="primary" @click="handleAdd">添加巡检任务</el-button> -->
            </div>
        </div>
        <div class="device-type">
            <p>
                <span>巡检状态：</span>
                <el-select size="mini" v-model="pageLimit.inspectionState" placeholder="请选择" @change="handlerInspectionState"
                  clearable>
                  <el-option v-for="item in inspectionStates" :key="item.value" :label="item.label" :value="item.value">
                  </el-option>
                </el-select>
            </p>
        </div>
        <div class="content-row">
            <el-table :data="tableData" style="width: 100%" border>
                <el-table-column prop="inspectionName" label="巡检名称" align="center" width="120">
                </el-table-column>
                <el-table-column prop="estateName" label="小区名称" align="center">
                </el-table-column>
                <el-table-column prop="deviceName" label="设备名称" align="center">
                </el-table-column>
                <el-table-column prop="maintenanceUserName" label="巡检人" align="center" width="120">
                </el-table-column>
                <el-table-column prop="inspectionState" label="巡检状态" align="center" width="120">
                    <template slot-scope="scope">
                        <el-tag :type="buttType[scope.row.inspectionState]">{{ inspectionStates[scope.row.inspectionState].label }}</el-tag>
                    </template>
                </el-table-column>
                <el-table-column prop="photo" label="巡检图片" align="center">
                    <template slot-scope="scope">
                        <el-image v-if="scope.row.photo" :src="scope.row.photo[0]" :preview-src-list="scope.row.photo"></el-image>
                        <div v-else>无</div>
                    </template>
                </el-table-column>
                <el-table-column prop="inspectionStartTime" label="开始时间" align="center" width="120">
                </el-table-column>
                <el-table-column prop="inspectionEndTime" label="结束时间" align="center" width="120">
                </el-table-column>
            </el-table>
        </div>
        <!-- 分页 -->
        <div class="pagination">
            <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange"
                :current-page="pageLimit.page" :page-sizes="[5, 10, 20, 30, 40, 100]" :page-size="pageLimit.size"
                layout="total, sizes, prev, pager, next, jumper" :total="total">
            </el-pagination>
        </div>
    </div>
</template>

<script>
import { inspectionList } from '../../api/api'
import commonFunction from '../../utils/commonFunction'
import commonData from '../../utils/commonData'
export default {
  data () {
    return {
      pageLimit: {
        page: 1,
        size: 5,
        inspectionState: '' // 巡检状态
      },
      buttType: ['primary', 'warning', 'success'],
      inspectionStates: [
        { label: '待巡检', value: '0' },
        { label: '巡检中', value: '1' },
        { label: '已巡检', value: '2' }
      ],
      total: 0,
      tableData: []
    }
  },
  created () {
    this.gitList()
  },
  methods: {
    handlerInspectionState (e) {
      this.pageLimit.inspectionState = e
      this.gitList()
    },
    // 获取
    gitList () {
      inspectionList({ ...this.pageLimit }).then(res => {
        if (res.code == 0) {
          const { total, records } = res.page
          this.tableData = records.map(item => {
            const inspectionStartTime = commonFunction.getTimeFormat(+new Date(item.inspectionStartTime), 'YYYY-MM-DD hh:mm:ss')
            const inspectionEndTime = commonFunction.getTimeFormat(+new Date(item.inspectionEndTime), 'YYYY-MM-DD hh:mm:ss')
            return {
              ...item,
              inspectionStartTime,
              inspectionEndTime
            }
          })
          this.total = total
        } else {
          this.$message.error(res.msg)
        }
      })
    },
    // 分页
    handleSizeChange (val) {
      this.pageLimit.size = val
      this.gitList()
    },
    handleCurrentChange (val) {
      this.pageLimit.page = val
      this.gitList()
    }
  }
}
</script>

<style scoped>
.page {
    position: relative;
    height: 100%;
}

.dialog_butt {
    height: 60px;
    width: 100%;
    position: fixed;
    bottom: 0px;
}

.nuclein-query {
    display: flex;
    align-items: center;
    padding: 20px;
    border-bottom: 1px solid #DCDFE6;
}

.device-type {
    display: flex;
    align-items: center;
    padding: 20px 20px 10px 20px;
}

.device-type>p {
    margin-right: 20px;
}

.content-row {
    overflow: hidden;
}

.device-type {
    display: flex;
    align-items: center;
    padding: 20px 20px 10px 20px;
}

/* 分页 */
.pagination {
    width: 100%;
    padding: 20px;
    border-top: 1px solid #DCDFE6;
}
</style>
